<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 面包屑 -->
        <el-breadcrumb
          v-if="showSubject"
          class="board"
          separator-class="el-icon-arrow-right"
        >
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>标签</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索框 -->
        <el-form :inline="true" :model="select" class="demo-form-inline">
          <el-form-item label="标签名称">
            <el-input
              v-model="select.tagName"
              placeholder="标签名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="select.state" placeholder="状态">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>

          <!-- 新增标签 -->
          <el-button class="addPro" @click="addSubmit">新增标签</el-button>
          <!-- 返回按钮 -->
          <el-button
            class="jump"
            v-if="showSubject"
            icon="el-icon-back"
            type="text"
            @click="$router.back()"
          >
            返回学科
          </el-button>
        </el-form>

        <!-- 提示 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>

        <!-- 表格 -->
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称"> </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template #default="{ row }">
              {{ formatDate(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template #default="{ row }">
              <span>{{ format(row.state) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="130"
            >>
            <template #default="{ row }">
              <el-button type="text" size="small" @click="changeState(row)">
                {{ row.state === 0 ? "启用" : "禁用" }}
              </el-button>
              <el-button
                type="text"
                @click="upSubmit(row)"
                size="small"
                @closeD="closeD"
                :disabled="row.state === 0"
              >
                修改
              </el-button>
              <el-button
                type="text"
                size="small"
                :disabled="row.state === 0"
                @click="delSub(row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          style="margin-top: 20px"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.page"
          :total="total"
          :page-size="params.pagesize"
          :page-sizes="[2, 5, 20, 50]"
          layout=" ->, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>
    <AddProject
      @closeD="closeD"
      :subject="subject"
      :row="row"
      :showAddProject="showAddProject"
      :showSubject="showSubject"
    />
  </div>
</template>

<script>
import AddProject from '@/module-hmmm/components/tags-add.vue'
import { list, remove, changeState } from '@/api/hmmm/tags.js'
import { simple } from '@/api/hmmm/subjects.js'
import dayjs from 'dayjs'
export default {
  // 接收的数组
  data () {
    return {
      // 显示学科列表
      showSubject: false,
      row: {},
      subject: [],
      total: 0,
      // 默认显示页
      currentPage: 1,
      alertText: '',
      // 弹层显示
      showAddProject: false,
      // 面包屑显示
      showBoard: false,
      select: {
        tagName: '',
        state: ''
      },
      tableData: [],
      // 分页参数
      params: {
        page: 1,
        pagesize: 5
      },
      del: [],
      change: []
    }
  },
  components: {
    AddProject
  },
  created () {
    this.getList()
  },
  methods: {
    // 关闭弹框------------------------------------------
    closeD () {
      this.row = {}
      this.showAddProject = false
      this.getList()
    },
    // -------------------------------------------------------
    // 新增
    async addSubmit () {
      this.showAddProject = true
      // 获取学科列表
      const { data } = await simple()
      this.subject = data
    },
    // 修改
    async upSubmit (row) {
      this.row = row
      const { data } = await simple()
      this.subject = data
      this.showAddProject = true
    },
    // 分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.params.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.params.page = val
      this.getList()
    },
    // 修改状态
    async changeState (row) {
      const data = await changeState({ id: row.id, state: row.state === 1 ? 0 : 1 })
      console.log(data)
      this.$message.success('操作成功')
      this.getList()
    },
    // 搜索
    async search () {
      const searchSkill = JSON.parse(JSON.stringify(this.params))
      if (this.select.tagName !== '') {
        searchSkill.tagName = this.select.tagName
      }
      if (this.select.state !== '') {
        searchSkill.state = this.select.state
      }
      const { data } = await list(searchSkill)
      console.log('data', data)
      this.tableData = data.items
    },
    // 删除
    async delSub (id) {
      this.del.id = id
      this.$confirm('此操作将永久删除 ' + ', 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          await remove(this.del)
          this.$message.success('成功删除' + '!')
          const newPage = Math.ceil((this.total - 1) / this.params.pagesize)
          if (newPage > 0) {
            this.params.page = newPage
          }
          this.getList()
        } catch (err) {
          this.$message.error('删除失败!')
        }
      }).catch(() => {
        this.$message.info('已取消操作!')
      })
    },
    // 格式化状态
    format (state) {
      console.log(state)
      if (state === 0) {
        return '已禁用'
      } else if (state === 1) {
        return '已启用'
      }
    },

    // 格式化时间
    formatDate (value, str = 'YYYY-MM-DD') {
      return dayjs(value).format(str)
    },
    // 获取列表
    async getList () {
      const { data } = await list(this.params)
      console.log('123', data)
      this.tableData = data.items
      this.alertText = `数据一共 ${data.counts} 条`
      this.total = data.counts
    },
    // 清除框
    clear () {
      this.select.tagName = ''
      this.select.state = ''
    }
  },
  // 监听路径跳转
  watch: {
    $route: {
      // 一进入页面立即执行
      immediate: true,
      handler: function (newVal, oldVal) {
        console.log('路由变化', newVal)
        if (newVal.fullPath === '/subjects/tags') {
          this.showSubject = false
        } else this.showSubject = true
      }
    }

  }

}

</script>

<style scoped>
.app-container {
  padding: 10px;
}
.board {
  margin-bottom: 20px;
}
.addPro {
  border: 0;
  color: #fff;
  float: right;
  background-color: #85ce61;
  margin-left: 20px;
}
.jump {
  float: right;
}
.alert {
  margin-bottom: 10px;
}
</style>
